<template>
  <div class="app-container">
    <div class="toolbar">
      <el-button type="primary" @click="handleAddSubject">新增</el-button>
      <el-button type="danger" @click="handleDeleteSubject" :disabled="!multipleSelection.length"
        >删除</el-button
      >
    </div>
    <Tabel
      :tableData="tableData"
      :cols="cols"
      :isSelect="true"
      @selection-change="handleSelectionChange"
    >
      <template #operationCol>
        <el-table-column>
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleEditSubject(row)">编辑</el-button>
          </template>
        </el-table-column>
      </template>
    </Tabel>
    <el-dialog
      :title="submitType ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :model="formData">
          <el-form-item v-for="item of cols" :key="item.key" :label="item.label" :prop="item.key">
            <el-input
              v-model="formData[item.key]"
              :disabled="submitType && item.notAllowEdit"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Tabel from '@/components/Table'
  import {
    getSubjectList,
    addSubject,
    editSubject,
    deleteSubject
  } from '@/api/TeachingCenter/subjectManage'
  export default {
    name: 'subjectManage',
    components: { Tabel },
    data() {
      return {
        tableData: [],
        cols: [
          {
            key: 'level',
            label: '年级'
          },
          {
            key: 'levelName',
            label: '年级名'
          },
          {
            key: 'name',
            label: '学科名'
          },
          {
            key: 'itemOrder',
            label: '排序'
          }
        ],
        multipleSelection: [],
        dialogVisible: false,
        formData: {},
        submitType: null //0：新增,1:修改
      }
    },
    created() {
      this._getSubjectList()
    },
    methods: {
      async _getSubjectList() {
        const { data } = await getSubjectList({})
        console.log(data)
        this.tableData = data.records
      },
      handleAddSubject() {
        this.dialogVisible = true
        this.submitType = 0
        this.formData = Object.assign({})
      },
      handleEditSubject(row) {
        this.formData = { ...row }
        this.submitType = 1
        this.dialogVisible = true
      },
      handleDeleteSubject() {
        this.$confirm('是否进行删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const ids = this.multipleSelection.map((item) => item.id)
          await deleteSubject({ ids })
          this._getSubjectList()
          this.$Msg.success('删除成功!')
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      async submit() {
        const submitArr = [addSubject, editSubject]
        const parmas = this.formData
        await submitArr[this.submitType](parmas)
        this._getSubjectList()
        this.$Msg.success('操作成功!')
        this.dialogVisible = false
      }
    }
  }
</script>
